<template>
    <div class="tips"><span>注意：</span>设置电商属性相关选项有0时，筛选的客户至少包含一个电商订单。</div>
    <el-form ref="retailRef" :model="formData" label-width="100px" :rules="rules">
        <el-form-item class="form-item" label="店铺类型">
            <el-checkbox-group v-model="formData.shop_type" @change="changShop">
                <el-checkbox :label="-1">不限</el-checkbox>
                <el-checkbox v-for="(item, index) in shopListOptList" :key="index" :label="item.id">
                    {{ item.name }}
                </el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item class="form-item" label="店铺列表">
            <el-checkbox-group v-model="formData.shop_id" @change="changStore">
                <el-checkbox :label="-1">不限</el-checkbox>
                <el-checkbox v-for="(item, index) in storeListOptList" :key="index" :label="item.id">
                    {{ item.name }}
                </el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item class="form-item" label="购买过商品">
            <el-radio-group v-model="formData.buy_good_type" @change="changeBuy">
                <el-radio :label="0">不限</el-radio>
                <el-radio :label="1">包含以下任意商品</el-radio>
                <el-radio :label="2">包含以下所有商品</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item v-show="formData.buy_good_type != 0" label="" label-width="120px" prop="buy_goods">
            <SelectGoods
                :source="formData.shop_type[0] == -1 ? [] : formData.shop_type"
                :store_list="formData.shop_id[0] == -1 ? [] : formData.shop_id"
                :select_goods_list="buyGoodsids"
                @selectedGoods="getBuy" />
        </el-form-item>
        <el-form-item class="form-item" label="未购买商品">
            <el-radio-group v-model="no_goods_type" @change="changenoBuy">
                <el-radio :label="0">不限</el-radio>
                <el-radio :label="1">指定商品</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item v-show="no_goods_type != 0" label="" label-width="120px" prop="no_buy_goods">
            <SelectGoods
                :source="formData.shop_type[0] == -1 ? [] : formData.shop_type"
                :store_list="formData.shop_id[0] == -1 ? [] : formData.shop_id"
                :select_goods_list="noGoodsids"
                @selectedGoods="getNoBy" />
        </el-form-item>
        <el-form-item class="form-item" label="最后消费">
            <el-button :class="fllowTime == 3 ? 'time-color' : ''" @click="changeTime(3)">近3天</el-button>
            <el-button :class="fllowTime == 7 ? 'time-color' : ''" @click="changeTime(7)">近7天</el-button>
            <el-button :class="fllowTime == 15 ? 'time-color' : ''" @click="changeTime(15)">近15天</el-button>
            <el-button :class="fllowTime == 30 ? 'time-color' : ''" @click="changeTime(30)">近30天</el-button>
            <el-button :class="fllowTime == -2 ? 'time-color' : ''" @click="changeTime(-2)">近N天</el-button>
            <el-input-number
                v-if="fllowTime == -2"
                v-model.number="last_day"
                class="right-input"
                :controls="false"
                :precision="0"
                :min="1"
                :max="1000"
                @blur="changeLastDay"></el-input-number>
            <el-button :class="fllowTime == 0 ? 'time-color' : ''" @click="changeTime(0)">自定义</el-button>
            <el-date-picker
                v-if="showAddTime"
                v-model="formData.last_consume_time"
                type="datetimerange"
                class="right-picker"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                style="width: 380px; margin-left: 10px; vertical-align: middle"></el-date-picker>
            <el-button :class="fllowTime == -1 ? 'time-color' : ''" class="right-item" @click="changeTime(-1)">
                不限制
            </el-button>
        </el-form-item>
        <el-form-item class="form-item" label="单次消费金额">
            <el-input-number
                v-model="numList.single_min"
                :min="0"
                :controls="false"
                :precision="2"
                class="item-input input-left"
                placeholder="金额下限"
                @blur="handlePrice(1)" />
            ~
            <el-input-number
                v-model="numList.single_max"
                :min="0"
                :controls="false"
                :precision="2"
                class="item-input"
                placeholder="金额上限"
                @blur="handlePrice(2)" />元
        </el-form-item>
        <el-form-item class="form-item" label="累计消费金额">
            <el-input-number
                v-model="numList.cumulative_min"
                :min="0"
                :controls="false"
                :precision="2"
                class="item-input input-left"
                placeholder="金额下限"
                @blur="handlePrice(3)" />~
            <el-input-number
                v-model="numList.cumulative_max"
                :min="0"
                :controls="false"
                :precision="2"
                class="item-input"
                placeholder="金额上限"
                @blur="handlePrice(4)" />元
        </el-form-item>
        <el-form-item class="form-item" label="累计消费次数">
            <el-input
                v-model.number="numList.frequency_min"
                class="item-input input-left"
                onkeyup="value=value.replace(/[^0-9]/g,'')"
                placeholder="最小值"
                @input="handleNum(1)" />~
            <el-input
                v-model.number="numList.frequency_max"
                class="item-input"
                onkeyup="value=value.replace(/[^0-9]/g,'')"
                placeholder="最大值"
                @input="handleNum(2)" />次<span style="color: red">(不填默认全部)</span>
        </el-form-item>
        <el-form-item class="form-item-tip">
            <template #label>
                <span>消费频率</span>
                <el-tooltip effect="light">
                    <template #content>
                        <div style="width: 150px">
                            客户多次消费时间的日期间隔平均值。例如：客户4次消费的日期为：01/01、01/08、01/23、01/31，该客户的消费频次为：(31-23+1)+(23-08+1)+(08-01+1)/3=11。
                        </div>
                    </template>
                    <img class="help_icon" src="@/assets/image/customer/help_icon.png" alt="" />
                </el-tooltip>
            </template>
            <el-input
                v-model.number="numList.consume_min"
                class="item-input input-left"
                placeholder="最小值"
                onkeyup="value=value.replace(/[^0-9]/g,'')"
                @input="handleNum(3)" />~
            <el-input
                v-model.number="numList.consume_max"
                class="item-input"
                placeholder="最大值"
                onkeyup="value=value.replace(/[^0-9]/g,'')"
                @input="handleNum(4)" />天
        </el-form-item>
        <el-form-item class="form-item" label="客单件">
            <el-input
                v-model.number="numList.piece_min"
                class="item-input input-left"
                placeholder="最小值"
                onkeyup="value=value.replace(/[^0-9]/g,'')"
                @input="handleNum(5)" />~
            <el-input
                v-model.number="numList.piece_max"
                class="item-input"
                placeholder="最大值"
                onkeyup="value=value.replace(/[^0-9]/g,'')"
                @input="handleNum(6)" />件
        </el-form-item>
        <el-form-item class="form-item" label="客单价">
            <el-input-number
                v-model="numList.price_min"
                :min="0"
                :controls="false"
                :precision="2"
                class="item-input input-left"
                placeholder="金额下限"
                @blur="handlePrice(5)" />~
            <el-input-number
                v-model="numList.price_max"
                :min="0"
                :controls="false"
                :precision="2"
                class="item-input"
                placeholder="金额上限"
                @blur="handlePrice(6)" />元
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { onBeforeUnmount, ref, reactive, watch } from 'vue';
import { getDiffDay, getSetionId } from '@/utils/utils';
import { getDay } from '@/utils/timeCycle';
import { stageList } from '@/api/customerCenter/labellagroup';
import SelectGoods from '@/components/zw/selectGoods/union.vue';
import { getStoreList } from '@/api/rules';
import { dictEnum } from '@/api/highMaterial/sourceMaterials';
const retailRef = ref(null);
const last_day = ref(60);
const formData = reactive({
    shop_type: [-1], //店铺类型
    shop_id: [-1], //店铺列表
    buy_good_type: 0, //0：不限，1：包含以下任意商品，2：包含以下所有商品
    buy_goods: [], //购买过商品
    no_buy_goods: [], //未购买过商品
    last_consume_time: [], //最后消费时间
    last_consume_day: 0, //近n天消费  0为自定义和不限制 自定义需传last_consume_time不限制传[]
    single_consume_amount: [], //单次消费金额
    cumulative_consume_amount: [], //累计消费金额
    cumulative_consume_frequency: [], //累计消费次数
    consume_frequency: [], //消费频率
    single_piece: [], //客单件
    single_price: [] //客单价
});
const numList = reactive({
    frequency_min: '',
    frequency_max: '',
    consume_min: '',
    consume_max: '',
    piece_min: '',
    piece_max: '',
    single_min: undefined,
    single_max: undefined,
    cumulative_min: undefined,
    cumulative_max: undefined,
    price_min: undefined,
    price_max: undefined
});
const buyGoodsids = ref([]);
const noGoodsids = ref([]);
const shopListOptList = ref([]);
const storeListOptList = ref([]);
const showAddTime = ref(false);
const fllowTime = ref(-1);
const props = defineProps(['retail_property']);
const no_goods_type = ref(0);
const goodsValid = (rule: any, value: any, callback: any) => {
    if (formData.buy_good_type == 0) {
        callback();
    } else {
        if (value.length == 0) {
            callback(new Error('请选择商品'));
        } else {
            callback();
        }
    }
};
const nogoodsValid = (rule: any, value: any, callback: any) => {
    if (no_goods_type.value == 0) {
        callback();
    } else {
        if (value.length == 0) {
            callback(new Error('请选择商品'));
        } else {
            callback();
        }
    }
};
// 表单验证规则
const rules = reactive({
    buy_goods: [{ required: true, validator: goodsValid, trigger: 'change' }],
    no_buy_goods: [{ required: true, validator: nogoodsValid, trigger: 'change' }]
});
//校验数字
const handleNum = (val: number) => {
    switch (val) {
        case 1:
        case 2:
            numList.frequency_min == 0 ? (numList.frequency_min = '') : '';
            numList.frequency_max == 0 ? (numList.frequency_max = '') : '';
            formData.cumulative_consume_frequency = [numList.frequency_min, numList.frequency_max];
            if (numList.frequency_min === '' && numList.frequency_max === '') {
                formData.cumulative_consume_frequency = [];
            }
            break;
        case 3:
        case 4:
            numList.consume_min == 0 ? (numList.consume_min = '') : '';
            numList.consume_max == 0 ? (numList.consume_max = '') : '';
            formData.consume_frequency = [numList.consume_min, numList.consume_max];
            if (numList.consume_min === '' && numList.consume_max === '') {
                formData.consume_frequency = [];
            }
            break;
        case 5:
        case 6:
            numList.piece_min == 0 ? (numList.piece_min = '') : '';
            numList.piece_max == 0 ? (numList.piece_max = '') : '';
            formData.single_piece = [numList.piece_min, numList.piece_max];
            if (numList.piece_min === '' && numList.piece_max === '') {
                formData.single_piece = [];
            }
            break;
    }
};
//校验金额
const handlePrice = (val: number) => {
    switch (val) {
        case 1:
        case 2:
            formData.single_consume_amount = [filFormat(numList.single_min), filFormat(numList.single_max)];
            if (formData.single_consume_amount[0] === '' && formData.single_consume_amount[1] === '') {
                formData.single_consume_amount = [];
            }
            break;
        case 3:
        case 4:
            formData.cumulative_consume_amount = [filFormat(numList.cumulative_min), filFormat(numList.cumulative_max)];
            if (formData.cumulative_consume_amount[0] === '' && formData.cumulative_consume_amount[1] === '') {
                formData.cumulative_consume_amount = [];
            }
            break;
        case 5:
        case 6:
            formData.single_price = [filFormat(numList.price_min), filFormat(numList.price_max)];
            if (formData.single_price[0] === '' && formData.single_price[1] === '') {
                formData.single_price = [];
            }
            break;
    }
};
const changeBuy = () => {
    if (formData.buy_good_type == 0) {
        buyGoodsids.value = [];
        formData.buy_goods = [];
    }
};
const changenoBuy = () => {
    if (no_goods_type.value == 0) {
        noGoodsids.value = [];
        formData.no_buy_goods = [];
    }
};
// 获取店铺类型
const getShop = () => {
    dictEnum({ dict_id: 1 }).then((r: any) => {
        shopListOptList.value = r || [];
    });
};
getShop();
//切换最后消费时间
const changeTime = (type: any) => {
    fllowTime.value = type;
    showAddTime.value = false;
    if (type != 0) {
        formData.last_consume_time = [];
    }
    switch (type) {
        case 3:
            return (formData.last_consume_day = 3);
        case 7:
            return (formData.last_consume_day = 7);
        case 15:
            return (formData.last_consume_day = 15);
        case 30:
            return (formData.last_consume_day = 30);
        case 0:
            formData.last_consume_day = 0;
            return (showAddTime.value = true);
        case -1:
            return (formData.last_consume_day = 0);
        case -2:
            return (formData.last_consume_day = last_day.value);
    }
};
//切换店铺类型
const changShop = (val: any) => {
    const index = val[val.length - 1];
    if (index == -1) {
        formData.shop_type = [-1];
        storeListOptList.value = [];
        formData.shop_id = [-1];
    } else {
        formData.shop_type = val.filter((item: any) => {
            return item != -1;
        });
        if (formData.shop_type.length > 0 && formData.shop_type[0] != -1) {
            getStore(formData.shop_type);
        } else {
            formData.shop_type = [-1];
            storeListOptList.value = [];
            formData.shop_id = [-1];
        }
    }
};
//获取店铺列表
const getStore = (val: any) => {
    getStoreList({ store_type: val }).then((res: any) => {
        storeListOptList.value = res;
    });
};
//切换店铺列表
const changStore = (val: any) => {
    if (val.length == 0) {
        formData.shop_id = [-1];
    } else {
        const index = val[val.length - 1];
        if (index == -1) {
            formData.shop_id = [-1];
        } else {
            formData.shop_id = val.filter((item: any) => {
                return item != -1;
            });
        }
    }
};
const getBuy = (val: any) => {
    buyGoodsids.value = val;
    formData.buy_goods = getSetionId('external_product_id', buyGoodsids.value);
    retailRef.value.clearValidate();
};
const getNoBy = (val: any) => {
    noGoodsids.value = val;
    formData.no_buy_goods = getSetionId('external_product_id', noGoodsids.value);
    retailRef.value.clearValidate();
};
//处理返参
const filFormat = (val: any) => {
    if (val == null) {
        return '';
    } else {
        return val;
    }
};
// 最后消费切换近N天
const changeLastDay = () => {
    formData.last_consume_day = last_day.value || 60;
    last_day.value = last_day.value || 60;
};
const updateData = (val: any) => {
    formData.shop_type = val.shop_type;
    formData.shop_id = val.shop_id;
    formData.last_consume_day = val.last_consume_day;
    if (val.last_consume_time && val.last_consume_time.length > 0) {
        fllowTime.value = 0;
        showAddTime.value = true;
    } else {
        if (val.last_consume_day == 0) {
            fllowTime.value = -1;
        } else {
            if ([3, 7, 15, 30].includes(val.last_consume_day)) {
                fllowTime.value = val.last_consume_day;
            } else {
                fllowTime.value = -2;
                last_day.value = val.last_consume_day;
            }
        }
    }
    formData.last_consume_time = val.last_consume_time;
    if (val.shop_type.length > 0) {
        getStore(val.shop_type);
    }
    (numList.frequency_min = filFormat(val.cumulative_consume_frequency[0])),
        (numList.frequency_max = filFormat(val.cumulative_consume_frequency[1])),
        (numList.consume_min = filFormat(val.consume_frequency[0])),
        (numList.consume_max = filFormat(val.consume_frequency[1])),
        (numList.piece_min = filFormat(val.single_piece[0])),
        (numList.piece_max = filFormat(val.single_piece[1])),
        (numList.single_min = filFormat(val.single_consume_amount[0])),
        (numList.single_max = filFormat(val.single_consume_amount[1])),
        (numList.cumulative_min = filFormat(val.cumulative_consume_amount[0])),
        (numList.cumulative_max = filFormat(val.cumulative_consume_amount[1])),
        (numList.price_min = filFormat(val.single_price[0])),
        (numList.price_max = filFormat(val.single_price[1]));
    formData.single_consume_amount = val.single_consume_amount;
    formData.cumulative_consume_amount = val.cumulative_consume_amount;
    formData.cumulative_consume_frequency = val.cumulative_consume_frequency;
    formData.consume_frequency = val.consume_frequency;
    formData.single_piece = val.single_piece;
    formData.single_price = val.single_price;
    if (val.shop_type.length == 0) {
        formData.shop_type = [-1];
    }
    if (val.shop_id.length == 0) {
        formData.shop_id = [-1];
    }
    buyGoodsids.value = val.buy_goods;
    formData.buy_good_type = val.buy_good_type;
    formData.buy_goods = getSetionId('external_product_id', buyGoodsids.value);
    noGoodsids.value = val.no_buy_goods;
    val.no_buy_goods.length > 0 ? (no_goods_type.value = 1) : (no_goods_type.value = 0);
    formData.no_buy_goods = getSetionId('external_product_id', noGoodsids.value);
};
watch(
    () => props.retail_property,
    val => {
        if (val && val.id) {
            updateData(val);
        }
    }
);
defineExpose({
    formData,
    fllowTime,
    retailRef
});
</script>
<style scoped lang="scss">
.tips {
    line-height: 1.5;
    font-size: 12px;
    color: #999;
    background-color: #fffaf9;
    padding: 8px;

    span {
        color: #ff6b00;
    }
}

.form-item {
    margin: 10px 0;

    .right-item {
        margin-left: 10px;
    }

    .time-color {
        background-color: #ff6b00;
        color: #fff;
    }
}

.item-input {
    width: 90px;
    margin: 5px;
}

.input-left {
    margin-left: 0;
}

.help_icon {
    cursor: pointer;
    width: 14px;
    height: 14px;
    margin: 8px 6px 0 4px;
}

.right-input {
    width: 90px;
    margin: 0 12px;
}
</style>
